<template>
<div class="page">
  <img src="../assets/images/homeBanner.png">
  <!-- <img :src = "../assets/images/homeBanner.png"> -->
  <div class="weui-flex">
    <div class="weui-flex__item">
      <img class="both" src="../assets/images/oneSide.png" alt="">
      <div class="side">
        <div class="imgs">
          <div class="imgs-item">
            <img class="num-img" src="../assets/images/oa_image_89.jpg">
            <img class="num-img" src="../assets/images/oa_image_89.jpg">
          </div>
        </div>
        <div class="imgs">
          <div class="imgs-item">
            <img class="num-img" src="../assets/images/oa_image_89.jpg">
            <img class="num-img" src="../assets/images/oa_image_89.jpg">
          </div>
        </div>
      </div>
      <p>愚公应该移山</p>
    </div>
    <div class="weui-flex__item">
      <img class="both" src="../assets/images/otherSide.png" alt="">
      <div class="otherSide">
        <div class="imgs">
          <div class="imgs-item">
            <img class="num-img" src="../assets/images/oa_image_73.jpg">
            <img class="num-img" src="../assets/images/oa_image_73.jpg">
          </div>
        </div>
        <div class="imgs">
          <div class="imgs-item">
            <img class="num-img" src="../assets/images/oa_image_73.jpg">
            <img class="num-img" src="../assets/images/oa_image_73.jpg">
          </div>
        </div>
      </div>
      <p style="color:#A3312F">愚公应该搬家</p>
    </div>
  </div>
</div>
</template>

<script>
// import wx from 'weixin-js-sdk';
export default {
  /**
   * created
   */
  created() {
    console.log('homeCreated');
    // console.log('wx', wx);
    // 初始化用户信息
//    User.initAccessInfo();

    const user = JSON.parse(window.localStorage.getItem('ict48-user-info'));
    console.log('获取到了用户信息', user)
  },
  route: {
    data() {
      console.log('1');
    }
  },
  data() {
    return {}
  },
  methods: {},
  /**
   * mounted
   */
  mounted: function() {
    console.log('homeMounted');
    // jump2debate
    const me = this;
    setTimeout(function() {
//      console.log('this2', this);
//      console.log('me2', me);
      me.$router.push('/debate');
    }, 3000);
  }
}
</script>

<style lang="scss" scoped>
.page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 1;
    background-color: #FBAC3B;
    p,
    span {
        font-family: Helvetica Neue,Tahoma,Arial;
    }
}
img {
    width: 100%;
}

.weui-flex {
    display: flex;
    margin-top: 2rem;
    bottom: 0;
    position: relative;
    .weui-flex__item {
        flex: 1;
    }
}
.both {
    width: 60%;
}
.imgs {
    display: flex;
    height: 5rem;
    .imgs-item {
        flex: 1;
    }
}
.num-img {
    margin-top: 0.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    // border-color: #f7f7f7;
    border-color: #E7E6E6;
    border-style: solid;
    border-width: 0.2rem;
}
.side {
    margin: 0.3rem 1rem;
    height: 10rem;
    // width: 8rem;
    border: 1px solid #191919;
    border-radius: 10px;
    background-color: white;
}
.otherSide {
    margin: 0.3rem 1rem;
    height: 10rem;
    // width: 8rem;
    border: 2px solid #A3312F;
    border-radius: 10px;
    background-color: #191919;
}
</style>
